<template>
    <div>
        <mt-header class="m_home_header" title="资金钱包">
            <router-link to="/m/home" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="fund_wallet_top">
            <div>
                <p>资金资产</p>
                <p>{{$store.state.balanceFund}}</p>
            </div>
            <router-link to="/m/recharge">
                <el-button size="mini" type="text">充币</el-button>
            </router-link>
            <router-link to="/m/extract">
                <el-button size="mini" type="text">提币</el-button>
            </router-link>
        </div>
        <mt-cell title="充币记录" to="/m/recharge-record" is-link></mt-cell>
        <mt-cell title="提币记录" to="/m/extract-record" is-link></mt-cell>
    </div>
</template>

<script>

    import {mapMutations,mapActions} from 'vuex'

    export default {
        name: "FundWallet",
        data(){
            return{

            }
        },
        mounted() {
            this.refreshBalance();
        },
        methods:{
            ...mapActions(['refreshBalance']),
        }
    }
</script>

<style scoped>
    .fund_wallet_top{
        display: flex;
        justify-content: space-between;
        padding:.3rem;
        background: linear-gradient(#e47307,#dd5b26);
        height: 1rem;
        align-items: center;
    }
    .fund_wallet_top>div{
        flex-grow: 1;
    }
    .fund_wallet_top>div p:first-child{
        font-size: .2rem;
        color:#eee;
    }
    .fund_wallet_top>div p:last-child{
        font-size: .3rem;
        color:#fff;
    }

    .fund_wallet_top .el-button{
        font-size: .22rem;
        color:#fff;
        border:1px solid #fff;
        padding:.05rem .2rem;
        margin-left: .3rem;
        border-radius: .2rem;
    }

    .mint-cell{
        border-bottom:1px solid #eff0f8;
    }
</style>
